import React from 'react';
import { useEffect, useState } from 'react'
import axios from 'axios'
// 语法结构:
// useEffect(()=>{ return()=>{} },[变量])
// 参数1: 必填参数 ,参数1 中return 可选
// 参数2: 可选参数
// 特点: 执行时机是在dom 更新后执行,可以将数据请求写在该函数中

const Father = () => {
    const [count, setCount] = useState(100);
    const [bannerArr, setBannerArr] = useState([]);
    const [money, setMoney] = useState(10000);
    //第一种写法: 相当于 componentDidMount 和componentDidUpdate
    // useEffect(() => {
    //     // 初始化执行, state 数据更新也执行 
    //     console.log(count);
    //     console.log(document.querySelector('p').innerHTML);
    //     // 数据请求合适? 
    //     // 此时此处不能进行数据的请求, 会陷入死循环
    // });

    // 第二种写法: 
    // 特点:不适合axios 数据请求
    // const handleFn = () => {
    //     console.log('你点我啦!!!');
    // }
    // useEffect(() => {
    //     console.log('1', count);  // 初始化执行
    //     document.addEventListener('click', handleFn, false)
    //     return () => {
    //         //一般此处执行的操作是清理副作用
    //         document.removeEventListener('click', handleFn, false)
    //         console.log('2', count); //当数据更新时,先执行该函数,然后再执行初始化,获取的state 为更新前的值
    //     }
    // });

    // 第三种写法:
    // 相当于watch 监听器
    // useEffect(() => {
    //     console.log(1, count); // 当参数2为空数组时, 那么只触发一次初始化,数据更新不执行
    //     // 参数2 为要监听的变量, 里面放要监听的数据, 可以有多个,放监听的变量发生变化时,才会触发 useEffect重新执行
    //     // 一般在该位置进行数据的请求操作
    //     axios.get('http://kumanxuan1.f3322.net:8001/index/index').then(res => {
    //         console.log(res);
    //         setBannerArr(res.data.data.brandList)
    //     })
    // }, []);

    // 第四种写法:
    // 只有当 参数2数组中的监听的响应数据改变后, 才执行retuen 闭包函数和再一次初始化,否则不执行
    useEffect(() => {
        console.log(1, count)  // 初始化执行
        // return () => {
        //     console.log(2, count)  // 数据count 变化时, 先执行, 然后再重新执行初始化
        // }
    }, [count])


    console.log('执行次数');

    return (
        <div>
            <p onClick={() => setCount(count + 1)}>count:{count}</p>
            <p onClick={() => setMoney(money + 1)}>money:{money}</p>
            <ul>
                {
                    bannerArr.map(item => {
                        return <li key={item.id}>{item.name}</li>
                    })
                }
            </ul>
        </div>
    );
}

export default Father;
